<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link href="js/locale/en.json" lang="en" rel="gettext" />
	<link href="js/locale/ru.json" lang="ru" rel="gettext" />
	<title></title>
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="js/jquery.gettext.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/services.js"></script>

	<script id="default" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<select size="1" id="selectService" style="float: right;">
			{{each services}}
				<option value="${id}">${title}</option>
			{{/each}}
		</select>
	</script>

	<script id="VolnaSite0" type="text/x-query-tmpl">
		<a id="oauthpopup" href="#" class="button"><span>${authorizeButton}</span></a>
	</script>

	<script id="VolnaSite1" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<div class="selectContainer">
			<select size="1" id="menus">
				<option value="###"></option>
				{{each menus}}
					<option value="${id}">${title}</option>
				{{/each}}
			</select>
			<a class="link" href="#" id="update"><span>${updateText}</span></a>
		</div>
	</script>

	<script id="VolnaSite2" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<div class="selectContainer">
			<select size="1" id="docs">
				<option value="">${newDoc}</option>
				{{each docs}}
					<option value="${docId}">${title}</option>
				{{/each}}
			</select>
			<a class="link" href="#" id="update"><span>${updateText}</span></a>
		</div>
	</script>

	<script id="VolnaSite" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="volnaSitePublish"><span>${publishButton}</span></a>
		<div style="float: left; margin-bottom: 0px;">{{if (link && link != '#') }} ${linkLabel} {{/if}}</div>
		<div style="clear: both;" class="ellipsis">
			<a href="${link}" target="_blank">${title}</a>
		</div>
		<!-- <a id="link" href="{{if (link && link != '#') }} ${link} {{/if}}" target="_blank">${title}</a> -->
	</script>

	<script id="GDocs0" type="text/x-jquery-tmpl">
		<a id="oauthpopup" href="#" class="button"><span>${authorizeButton}</span></a>
	</script>

	<script id="GDocs1" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<div class="selectContainer">
			<select size="1" id="gdocs">
				<option value="">${newGDoc}</option>
				{{each gdocs}}
					<option value="${id}">${title}</option>
				{{/each}}
			</select>
			<a class="link" href="#" id="update"><span>${updateText}</span></a>
		</div>
	</script>

	<script id="GDocs" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="postDoc"><span>${publishButton}</span></a>
		<div style="float: left; margin-bottom: 0px;">{{if (link && link != '#') }} ${linkLabel} {{/if}}</div>
		<div style="clear: both;" class="ellipsis">
			<a href="${link}" target="_blank">${title}</a>
		</div>
	</script>

	<script id="Blogger0" type="text/x-jquery-tmpl">
		<a id="oauthpopup" href="#" class="button"><span>${authorizeButton}</span></a>
	</script>

	<script id="Blogger1" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<div class="selectContainer">
			<select size="1" id="blogs">
				{{each blogs}}
					<option value="${id}">${title}</option>
				{{/each}}
			</select>
			<a class="link" href="#" id="update"><span>${updateText}</span></a>
		</div>
	</script>

	<script id="Blogger2" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="ok"><span>${okButton}</span></a>
		<div class="selectContainer">
			<select size="1" id="posts">
				<option value="">${newPost}</option>
				{{each posts}}
					<option value="${id}">${title}</option>
				{{/each}}
			</select>
			<a class="link" href="#" id="update"><span>${updateText}</span></a>
		</div>
	</script>

	<script id="Blogger" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="bloggerPublish"><span>${publishButton}</span></a>
		<div style="float: left; margin-bottom: 0px;">{{if (link && link != '#') }} ${linkLabel} {{/if}}</div>
		<div style="clear: both;" class="ellipsis">
			<a href="${link}" target="_blank">${title}</a>
		</div>
	</script>
	
	<script id="Html0" type="text/x-jquery-tmpl">
		<a id="oauthpopup" href="#" class="button"><span>${authorizeButton}</span></a>
	</script>

	<script id="Html" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="htmlPublish"><span>${publishButton}</span></a>
		<div style="float: left; margin-bottom: 0px;">{{if (link && link != '#') }} ${linkLabel} {{/if}}</div>
		<div style="clear: both;" class="ellipsis">
			<a href="${link}" target="_blank">${title}</a>
		</div>
	</script>

	<script id="fixButonTemplate" type="text/x-jquery-tmpl">
		<a class="button" href="#" id="fix"><span>${fixButton}</span></a>
	</script>

	<script id="backBtnContainer" type="text/x-jquery-tmpl">
		<a id="backBtn" href="#" class="link"><div class="backBtn"></div><span>${backButton}</span></a>
	</script>
	
	<script id="face" type="text/x-jquery-tmpl">
	<div style="display: block;">
		<div class="icon ${service}"></div>
		<div id="message">${message}</div>
	</div>
	<div id="controls" class="clear" style="clear:both; margin-top: 10px;"></div>
	</script>

<style type="text/css">
	.ellipsis{
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.selectContainer{
		width: 130px;
		float: right;
	}
	#update{
		font-size: 10px;
	}
	#panel{
		width: 320px;
	}
	.default{
		background-image: url('img/icon.png');
	}
	.VolnaSite{
		background-image: url('img/volnaSiteService.png');
	}
	.Blogger{
		background-image: url('img/bloggerService.png');
	}
	.GDocs{
		background-image: url('img/gdocsService.png');
	}
	.Html{
		background-image: url('img/htmlService.png');
	}
	.icon{
		width: 56px;
		height: 66px;
		float: left;
		margin-right: 10px;
		background-repeat: no-repeat;
	}
	#content{
		padding: 10px;
		font-family: arial, sans-serif;
		font-size: 14px;
	}
	.clear { /* generic container (i.e. div) for floating buttons */
	    overflow: hidden;
	    width: 100%;
	}
	a.button, a.button-disabled{
	    background: transparent url('img/bg_button_a.png') no-repeat scroll top right;
	    color: #FFF;
	    display: block;
	    float: right;
	    font: normal 12px arial, sans-serif;
	    height: 20px;
	    margin-left: 10px;
	    margin-bottom: 5px;
	    padding-right: 8px; /* sliding doors padding */
	    text-decoration: none;
	    cursor: pointer;
	}
	a.button span, a.button-disabled span {
	    background: transparent url('img/bg_button_span.png') no-repeat;
	    display: block;
	    line-height: 14px;
	    padding: 3px 0px 3px 8px;
	}
	a.button:active {
	    background-position: bottom right;
	    color: #FFF;
	    outline: none; /* hide dotted outline in Firefox */
	}
	a.button:active span {
	    background-position: bottom left;
	    padding: 4px 0 2px 8px; /* push text down 1px */
	}
	a.button-disabled {
	    background-position: 100% 50%;
	}
	a.button-disabled span {
	    background-position: 0 -20px;
	}
	select{
		margin-top: 0px;
		/*margin-left: 10px;
		/*float: right;*/
		width: 130px;
		color: black;
		background: #FFF;
		border: 1px solid #0c5cae;
	}
	button{
		height: 20px;
	}
	a.link{
		cursor: pointer;
		color: #666666;
	}
	a.link span{
		padding-bottom: 10px;
	}
	/*div.backContainer{
		padding: 0px;
		margin: 15px 0 0 0;
	}*/
	div.backBtn{
		width: 6px;
		height: 11px;
		background: url('img/back.png') no-repeat;
		margin-right: 7px;
		margin-top: 3px;
		float: left;
	}
	body{
		margin: 0;
	}
</style>
</head>
<body>
	<div id="panel">
		<div id="content"></div>
	</div>
	<script type="text/javascript">
	var service;
	$(document).ready(function(){
		$(document).bind('blah', function(){
			var queryParams = getQueryParameters();
			if(!queryParams['locale']) queryParams['locale'] = 'en';
			$.gt.setLang(queryParams['locale']);
			service = new Service(queryParams);
		})
		if(window.parent && window.parent != window && window.parent.postMessage){
			window.parent.postMessage('[{"action": "setGwextFrameHeight", "height":"155px"}]', 'https://wave.google.com/');
		}
		$.gt.load();
	})
	</script>
</body>
</html>
